<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <input type="file" class="tj">
    <img src="" alt="">
</body>
</html>
<script>
    var tj=document.querySelector('.tj')
    var img=document.querySelector('img')
    tj.addEventListener('change',function(e){
        var fd=new FormData()
        fd.append('img',e.target.files[0])
        var xhr=new XMLHttpRequest
        xhr.open('post','https://hmajax.itheima.net/api/uploadimg')
        xhr.upload.onprogress=function(ev){
            var per=(ev.loaded/ev.total)*100+'%'
        }
        xhr.send(fd)
        xhr.onreadystatechange=function(){
            if(xhr.readyState==4&&xhr.status==200){
                var res=JSON.parse(xhr.response)
                img.src=res.data.url
            }
        }
    })
</script>